import React, { useState, useEffect, memo } from 'react'
import './index.css'
import { Progress, Button, Modal, DatePicker, Skeleton } from 'antd'
import MyProgress from '../MyProgress'
import Guests from '../Guests'
import RoomDetail from '../RoomDetail'
import moment from 'moment'
import { ipList as presentIp } from '../../ipConfig'

function SingleHotelRoom({ room, time }) {
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [selectedDate, setSelectedDate] = useState(
    moment(new Date()).format('YYYY-MM-DD')
  )
  const [data, setData] = useState([])
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    if (
      moment(new Date()).format('YYYY-MM-DD') >=
      moment(time[1]).format('YYYY-MM-DD')
    ) {
      setSelectedDate(moment(time[1]).format('YYYY-MM-DD'))
    } else {
      setSelectedDate(moment(new Date()).format('YYYY-MM-DD'))
    }
  }, [time])

  useEffect(() => {
    if (selectedDate === moment(new Date()).format('YYYY-MM-DD')) {
      setData(room.invalidTime)
    }
  }, [room.invalidTime, selectedDate])

  /*   useEffect(() => {
    const data = room.invalidTime.filter((item) => {
      const date = moment(selectedDate).format('YYYY-MM-DD')
      return moment(item.time).format('YYYY-MM-DD') === date
    })
    setData(data)
  }, [selectedDate, room.invalidTime]) */

  const showModal = () => {
    setIsModalVisible(true)
  }

  const handleOk = () => {
    setIsModalVisible(false)
  }

  const handleCancel = () => {
    setIsModalVisible(false)
  }

  const computTime = (time) => {
    if (time === '全无效') {
      return '--'
    }
    // 当前时间的时间戳
    var nowTime = Date.parse(new Date())
    // 指定时间的时间戳
    var endTime = Date.parse(new Date(time))
    // 计算相差天数
    var timeResult = nowTime - endTime
    var days = Math.floor(timeResult / (24 * 3600 * 1000))
    // 计算出小时数
    var dayMS = timeResult % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数
    var hours = Math.floor(dayMS / (3600 * 1000))
    // 计算相差分钟数
    var hoursMS = dayMS % (3600 * 1000) // 计算小时数后剩余的毫秒数
    var minutes = Math.floor(hoursMS / (60 * 1000))
    return days + '天' + hours + '小时' + minutes + '分'
  }

  const disabledDate = (current) => {
    if (
      moment(new Date()).format('YYYY-MM-DD') >=
      moment(time[1]).format('YYYY-MM-DD')
    ) {
      return current < moment(time[0]) || current >= moment(time[1])
    } else {
      return current < moment(time[0]) || current >= moment(new Date())
    }
  }

  const onChange = (date, dateString) => {
    setSelectedDate(moment(dateString).format('YYYY-MM-DD'))
    let url = `${presentIp.DEV_IP}/room_invalid?registerId=${room.registerId}&time=${dateString}`
    console.log(url)
    setLoading(true)
    fetch(url, {
      headers: {
        token: sessionStorage.getItem('token'),
      },
    })
      .then((response) => {
        return response.json()
      })
      .then((json) => {
        setData(json.data)
        setLoading(false)
      })
  }

  return (
    <div>
      <div>
        <span style={{ fontSize: '1.5em', margin: '1em' }}>
          {room.roomname}
        </span>
        <span>{room.rest_netId}</span>
      </div>
      <div style={{ position: 'absolute', top: '10px', right: '10px' }}>
        <Progress
          type="circle"
          strokeColor={{
            '0%': '#108ee9',
            '100%': '#87d068',
          }}
          percent={((1 - room.invalidProportion) * 100).toFixed(2)}
          width={50}
        />
      </div>

      <div style={{ display: 'flex', margin: '1em' }}>
        <div
          className={
            Date.parse(new Date()) - Date.parse(new Date(room.lastValidTime)) <=
            1200000
              ? 'circle-green'
              : 'circle-red'
          }></div>

        <div>{computTime(room.lastValidTime)}</div>
      </div>
      <div style={{ margin: '1em' }}>
        <div>
          <DatePicker
            size="small"
            disabledDate={disabledDate}
            defaultValue={
              moment(new Date()).format('YYYY-MM-DD') >=
              moment(time[1]).format('YYYY-MM-DD')
                ? moment(time[1])
                : moment(new Date())
            }
            onChange={onChange}
          />
        </div>

        <div style={{ paddingTop: '1em' }}>
          <Skeleton
            loading={loading}
            active
            title={true}
            width={'100%'}
            paragraph={false}>
            <MyProgress data={data} />
          </Skeleton>
        </div>
      </div>
      <div style={{ position: 'absolute', bottom: '10px', right: '10px' }}>
        <Button type="default" onClick={showModal}>
          ...detail
        </Button>
      </div>
      <Modal
        title="插卡取电"
        centered
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        width={1000}>
        <div>
          {/*  <HotelsNumber /> */}
          <RoomDetail registerId={room.registerId} time={time} />
        </div>
      </Modal>
    </div>
  )
}

export default memo(SingleHotelRoom)
